<template>
  <BasicTable @register="registerTable" :rowSelection="rowSelection">
    <template #tableTitle>
      <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd" style="margin-right: 5px">新增</a-button>
      <a-button preIcon="ant-design:edit-outlined" type="primary" @click="handleOpenServiceCodes" style="margin-right: 5px">服务编码</a-button>
      <a-button preIcon="ant-design:sync-outlined" type="primary" @click="handleSyncResource" style="margin-right: 5px">同步资源</a-button>
      <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAuthorize" style="margin-right: 5px">授权</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="batchHandleDelete">
              <Icon icon="ant-design:delete-outlined"></Icon>
              删除
            </a-menu-item>
          </a-menu>
        </template>
        <a-button>批量操作
          <Icon icon="mdi:chevron-down"></Icon>
        </a-button>
      </a-dropdown>
    </template>
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
    </template>
  </BasicTable>

  <ResourceModal @register="registerModal" @success="reload" />
  <ResourceDesc @register="registerDesc" @success="reload" />
  <AuthorizeDrawer @register="registerAuthorizeDrawer" :showFooter="true"/>
  <DictItemList @register="registerServiceCodes" :showFooter="true"/>
</template>
<script lang="ts" name="ram-resource" setup>
import { ref } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import { useModal } from '/@/components/Modal';
import ResourceDesc from './ResourceDesc.vue';
import AuthorizeDrawer from './AuthorizeDrawer.vue';
import { pageResource, deleteResource, batchDeleteResource, syncResource } from './resource.api';
import { columns, searchFormSchema } from './resource.data';
import ResourceModal from './ResourceModal.vue';
import { useMessage } from "/@/hooks/web/useMessage";
import { useListPage } from '/@/hooks/system/useListPage'
import { useRoute, useRouter } from "vue-router"
import { Icon } from '/@/components/Icon';
import DictItemList from '/@/views/system/dict/components/DictItemList.vue'

const router = useRouter()
const props = defineProps({
  namespaceId: { type: String },
});
const { createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerDesc, { openDrawer: openResourceDesc }] = useDrawer();
const [registerServiceCodes, { openDrawer: openServiceCodes }] = useDrawer();
const [registerAuthorizeDrawer, { openDrawer: openAuthorizeDrawer }] = useDrawer();

const { prefixCls, tableContext } = useListPage({
  designScope: 'ram-resource',
  tableProps: {
    title: '资源管理',
    api: pageResource,
    beforeFetch: (params) => {
      params.namespaceId = props.namespaceId
    },
    bordered: false,
    actionColumn: {
      width: 150,
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      slots: { customRender: 'action' },
    },
    columns: columns,
    formConfig: {
      schemas: searchFormSchema,
      fieldMapToTime: [['fieldTime', ['beginDate', 'endDate'], 'YYYY-MM-DD HH:mm:ss']]
    }
  }
})
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

function handleDetail(record) {
  openResourceDesc(true, {
    record,
    isUpdate: true,
  });
}

const handleAuthorize = () => {
  openAuthorizeDrawer(true, {})
}

const handleSyncResource = () => {
  createMessage.loading({
    content: `正在同步资源...`,
    key: 'sync_resource',
    duration: 0,
  });
  syncResource().then(() => {
    reload()
    createMessage.success({
      content: `同步成功`,
      key: 'sync_resource',
      duration: 2,
    });
  }).catch(e => {
    createMessage.destroy('sync_resource');
  })
}

const handleOpenServiceCodes = () => {
  openServiceCodes(true, { typeCode: 'service_code'});
}

function getTableAction(record) {
  return [
    {
      label: '查看',
      onClick: handleDetail.bind(null, record),
    },
    {
      label: '删除',
      color: 'error',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
    {
      label: '编辑',
      onClick: handleEdit.bind(null, record),
    }
  ]
}


function getDropDownAction(record): ActionItem[] {
  return []
}


/**
 * 新增事件
 */
function handleAdd() {
  openModal(true, {
    isUpdate: false,
  });
}

/**
 * 编辑事件
 */
function handleEdit(record) {
  openModal(true, {
    record,
    isUpdate: true,
  });
}

/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteResource({ id: record.id }, reload);
}

/**
 * 批量删除事件
 */
async function batchHandleDelete() {
  await batchDeleteResource({ ids: selectedRowKeys.value }, reload);
}
</script>
